<template>
  <el-dialog width="800px" title="库位类型" :visible.sync="dialogVisible" :before-close="close">
    <!-- tool start -->
    <el-form ref="form" size="mini" :rules="ruleForm" :model="formInline" label-width="120px">
      <el-row>
        <el-col :span="16" :offset="3">
          <el-form-item label="类型名称：" prop="name">
            <el-input maxlength="50" show-word-limit v-model="formInline.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16" :offset="3">
          <el-form-item label="所属仓库：">
            <el-input maxlength="20" show-word-limit v-model="formInline.warehousename" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16" :offset="3">
          <el-form-item label="尺寸(cm)：">
            <el-col :span="8" class="el-col-flex">
              <el-form-item label="长：" prop="extent" label-width="30px">
                <el-input maxlength="20" show-word-limit v-model.number.trim="formInline.extent"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="el-col-flex">
              <el-form-item label="宽：" prop="width" label-width="30px">
                <el-input maxlength="20" show-word-limit v-model.number.trim="formInline.width"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="el-col-flex">
              <el-form-item label="高：" prop="height" label-width="30px">
                <el-input maxlength="20" show-word-limit v-model.number.trim="formInline.height"></el-input>
              </el-form-item>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="5" class="size-total">{{parseFloat(formInline.extent*formInline.width*formInline.height)}}&nbsp;cm<sup>3</sup></el-col>
        <!-- 关联容器类型 -->
        <el-col :span="16" :offset="3">
          <el-form-item label="关联容器类型：" prop="type">
            <el-select v-model="formInline.locationtypeid">
              <el-option
                v-for="(item,index) in typeOptions"
                :key="index"
                :label="item.name"
                :value="item.id"
                :disabled="item.disabled"
              >{{item.name+'('+item.size+')'}}</el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="16" :offset="3">
          <el-form-item label="备注：">
            <el-input
              type="textarea"
              maxlength="100"
              show-word-limit
              v-model="formInline.remark"
              :rows="2">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- tool end -->
    <el-row>
      <el-button size="mini" type="primary" @click="save">确定</el-button>
      <el-button size="mini" @click="close">关闭</el-button>
    </el-row>
  </el-dialog>
</template>
<script>
import {formValidate} from '@/assets/mixins/rule/type-setting-validate'
export default {
  name:'inventory-details-popup',
  // props:['dialogVisible','detail','typeOptions'],
  props:['dialogVisible','detail'],
  mixins:[formValidate],
  data(){
    return {
      formInline:{
        name:'', // 类型名称
        warehousename:'仰光仓库', // 所属仓库名称
        warehouseid:1217662280062251000, // 所属仓库id
        extent:0, // 长
        width:0, // 宽
        height:0, // 高
        locationtypeid:'', // 关联容器id
        remark:'' // 备注
      },
      typeOptions:[
        {id:0,name:'A托盘',size:'100*100*100'},
        {id:1,name:'B托盘',size:'80*80*80'},
        {id:2,name:'C拖车',size:'40*40*40'},
        {id:3,name:'D篮子',size:'10*10*10'}
      ]
    }
  },
  computed:{

  },
  mounted(){

  },
  methods:{
    close(){
      this.$emit('close')
    },
    save(){
      this.$refs['form'].validate((valid)=>{
        if(valid) this.$emit('save',this.formInline)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-divider__text{font-size: 18px;}
.el-form-item{
  .el-col-flex{
    display: flex; word-break: keep-all; padding: 0 10px;
    ::v-deep .el-form-item__label{text-transform: lowercase;}
  }
  .el-col-flex:first-child{padding-left: 0;}
  .el-col-flex:last-child{padding-right: 0;}
}
.size-total{
  line-height: 28px; margin-bottom: 18px;
  sup{line-height: 1;}
}
.el-select{width: 100%;}
</style>